<!-- 分拣台内详细的信息 -->
<script setup lang="ts">
  import { ref, defineProps, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { queryProgramManagCount } from '@/api/sorting-matching';

  const props = defineProps<{
    objectInfo: {
      consoleId: string;
      consoleName: string;
    };
  }>();
  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });
  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'id',
      align: 'center',
      slotName: 'id',
      width: '80',
    },
    {
      title: '操作台ID',
      dataIndex: 'consoleId',
      width: '180',
    },
    {
      title: '站位',
      dataIndex: 'station',
      width: '120',
    },
    {
      title: 'AO编号',
      dataIndex: 'aoCode',
      width: '180',
    },

    {
      title: '开始架次',
      dataIndex: 'startPlaneNo',
      width: '120',
    },
    {
      title: '结束架次',
      dataIndex: 'endPlaneNo',
      width: '120',
    },
    {
      title: 'AO条码',
      dataIndex: 'aoBarcode',
      width: '180',
    },
    {
      title: 'AO名称',
      dataIndex: 'aoName',
      width: '120',
    },
    {
      title: '批次',
      dataIndex: 'batchNo',
      width: '120',
    },
    {
      title: '物料编码',
      dataIndex: 'itemCode',
      width: '180',
    },
    {
      title: '物料名称',
      dataIndex: 'itemName',
      width: '180',
    },

    {
      title: '数量',
      dataIndex: 'itemQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      width: '80',
    },
    {
      title: '质量编号',
      dataIndex: 'qualityCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      width: '180',
    },

    {
      title: '配套数量',
      dataIndex: 'matchQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      width: '120',
    },
    {
      title: '接收数量',
      dataIndex: 'receiveQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      width: '120',
    },

    {
      title: '驳回数量',
      dataIndex: 'rejectQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      width: '120',
    },
    {
      title: '退回数量',
      dataIndex: 'returnQty',
      width: '120',
    },

    {
      title: '二次配套数量',
      dataIndex: 'secondMatchQty',
      width: '120',
    },
    {
      title: 'IP',
      dataIndex: 'sortingIp',
      width: '180',
    },

    {
      title: '开始架次',
      dataIndex: 'startPlaneNo',
      width: '120',
    },
    {
      title: '结束架次',
      dataIndex: 'endPlaneNo',
      width: '120',
    },
    {
      title: '合格证号',
      dataIndex: 'mesCheckQualiticationId',
      width: '180',
    },
    {
      title: '装配图号',
      dataIndex: 'repartAss',
      width: '180',
    },
    {
      title: '分拣状态',
      dataIndex: 'sortingStatus',
      width: '180',
    },

    {
      title: '机型代码',
      dataIndex: 'productCode',
      width: '180',
    },
    {
      title: '机型名称',
      dataIndex: 'productName',
      width: '180',
    },

    {
      title: '配送状态',
      dataIndex: 'deliveryState',
      width: '180',
    },
  ];
  const detailedDrawer = ref<boolean>(false);
  const localTableData = ref<any[]>([]);
  const planeNo1 = ref<string>('');
  const station1 = ref<string>('');
  const aoCode1 = ref<string>('');

  const planeNo2 = ref<string>('');
  const station2 = ref<string>('');
  const aoCode2 = ref<string>('');

  const twoWeeksList = ref<any[]>([]);
  const monthList = ref<any[]>([]);

  // 双周未完成的
  async function getDaysList() {
    const data = await queryProgramManagCount({
      consoleId: props.objectInfo.consoleId,
      aoCode: aoCode2.value,
      startPlaneNo: planeNo2.value,
      station: station2.value,
    });
    localTableData.value = data.responseBody.countList;

    twoWeeksList.value = localTableData.value
      .filter((item: any) => {
        return item.consoleId === props.objectInfo.consoleId;
      })
      .map((item: any) => item.twoWeeksList);
  }

  function resetDaysList() {
    planeNo2.value = '';
    station2.value = '';
    aoCode2.value = '';
    getDaysList();
  }

  // 一个月完成的
  async function getMonthList() {
    const data = await queryProgramManagCount({
      consoleId: props.objectInfo.consoleId,
      aoCode: aoCode1.value,
      startPlaneNo: planeNo1.value,
      station: station1.value,
    });
    localTableData.value = data.responseBody.countList;
    monthList.value = localTableData.value
      .filter((item: any) => {
        return item.consoleId === props.objectInfo.consoleId;
      })
      .map((item: any) => item.monthList);
    console.log(monthList.value);
  }

  function resetMonthList() {
    planeNo1.value = '';
    station1.value = '';
    aoCode1.value = '';
    getMonthList();
  }
  watch(
    () => props.objectInfo,
    () => {
      planeNo2.value = '';
      station2.value = '';
      aoCode2.value = '';
      planeNo1.value = '';
      station1.value = '';
      aoCode1.value = '';
      getDaysList();
      getMonthList();
    },
    {
      deep: true,
    }
  );
</script>

<template>
  <a-drawer
    :width="800"
    :visible="detailedDrawer"
    :footer="false"
    unmount-on-close
    @cancel="detailedDrawer = !detailedDrawer"
  >
    <template #title> {{ props.objectInfo.consoleName }} </template>
    <div>
      <a-card :header-style="hStyle" :bordered="false">
        <template #title>
          <div class="font">未完成AO任务</div>
        </template>
        <a-row :gutter="8">
          <a-col :span="6">
            <a-input
              v-model="planeNo2"
              placeholder="架次"
              size="large"
              allow-clear
            />
          </a-col>
          <a-col :span="6">
            <a-input
              v-model="station2"
              placeholder="站位"
              size="large"
              class="margin-top"
              allow-clear
            />
          </a-col>
          <a-col :span="6">
            <a-input
              v-model="aoCode2"
              placeholder="AO"
              size="large"
              class="margin-top"
              allow-clear
            />
          </a-col>

          <a-col :span="6">
            <a-button type="primary" size="large" @click="getDaysList"
              >查询</a-button
            >
            <a-button class="btn-reset" size="large" @click="resetDaysList"
              >重置
            </a-button>
          </a-col>
          <a-col :span="24" style="margin-top: 10px">
            <a-table
              :stripe="true"
              style="white-space: nowrap"
              :pagination="false"
              :columns="columns"
              :data="twoWeeksList[0]"
            >
              <template #id="{ record }">
                {{ twoWeeksList[0].indexOf(record) + 1 }}
              </template>
            </a-table>
          </a-col>
        </a-row>
      </a-card>

      <a-card :header-style="hStyle" :bordered="false">
        <template #title>
          <div class="font">已完成AO任务</div>
        </template>
        <a-row :gutter="8">
          <a-col :span="6">
            <a-input
              v-model="planeNo1"
              placeholder="架次"
              size="large"
              allow-clear
            />
          </a-col>
          <a-col :span="6">
            <a-input
              v-model="station1"
              placeholder="站位"
              size="large"
              class="margin-top"
              allow-clear
            />
          </a-col>
          <a-col :span="6">
            <a-input
              v-model="aoCode1"
              placeholder="AO"
              size="large"
              class="margin-top"
              allow-clear
            />
          </a-col>
          <a-col :span="6">
            <a-button type="primary" size="large" @click="getMonthList"
              >查询</a-button
            >
            <a-button class="btn-reset" size="large" @click="resetMonthList"
              >重置
            </a-button>
          </a-col>
          <a-col :span="24" style="margin-top: 10px">
            <a-table
              :stripe="true"
              style="white-space: nowrap"
              :pagination="false"
              :columns="columns"
              :data="monthList[0]"
            >
              <template #id="{ record }">
                {{ monthList[0].indexOf(record) + 1 }}
              </template>
            </a-table>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </a-drawer>
</template>

<style scoped>
  .btn-reset {
    margin-left: 10px;
  }
</style>
